<template>
  <el-dialog v-model="dialogVisible" :title="rowData.type === 'add' ? '新增' : '编辑'" width="500" @close="handleClose">
    <el-form ref="formRef" style="max-width: 600px" :model="formData" label-width="auto" class="demo-ruleForm">
      <el-form-item
        label="age"
        prop="age"
        :rules="[
          { required: true, message: 'age is required' },
          { type: 'number', message: 'age must be a number' },
        ]"
      >
        <el-input v-model.number="formData.age" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="categoryCode" prop="categoryCode">
        <el-input v-model="formData.categoryCode" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
        <el-button @click="resetForm(formRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { dialogVisible, rowData } = toRefs(props)
const emit = defineEmits(['update:dialogVisible', 'submit'])
// 表单
const formRef = ref()

let formData = reactive({
  age: '',
})
if (rowData.value.type === 'add') {
  formData.categoryCode = 'ex_type_' + new Date().getTime() //新增时 自动编号
} else {
  formData = reactive({ ...rowData.value })
  delete formData.type
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const api = rowData.value.type === 'add' ? 'addCategory' : 'editCategory'
      // exceptionManage[api]({ ...formData }).then((res) => {
      // visibleModal.value = false
      ElMessage.success('操作成功')
      emit('submit')
      handleClose()
      // })
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  handleClose()
}
const handleClose = () => {
  emit('update:dialogVisible', false)
}
</script>

<style lang="scss" scoped></style>
